<!--普通列表-->
<template>
  <div class="job-lists">
    <div v-for="item in jobLists" :key='item.id' class="job-component clear" @click="gotoJobDetails(item.id)">
      <div class="company-pic fl">
        <img :style="{'width':''}" :src="item.rdd_company.pic1" @error="imgError(item)">
      </div>
      <div class="position fl">
        <div class="pos-price ">
          <div>{{item.positionSalaryRange}} <span>元/月</span></div>
        </div>
        <div class="pos-title ">
          {{item.rdd_company.companyName}}{{item.positionName}}
        </div>
        <div class="pos-tags clear">
          <div v-for='tag in item.positionTag' class="fl tag">{{tag}}</div>
        </div>
        <div class="position-sub">
          <div class="price-box">
            <span class="price-box-title title-time" v-show="item.positionPrice">工</span>
            <span class="price-box-content" v-show="item.positionPrice">{{item.positionPrice}}<span> 元/时 </span></span>
            <span class="price-box-title title-price" v-show="item.positionRefee">返</span>
            <span class="price-box-content" v-show="item.positionRefee">{{item.positionRefee}}<span> 元</span></span>
          </div>
        </div>
      </div>
      <div class="skew-banner" v-show="item.positionSkewBanner&&item.positionSkewBanner!=''">
        <span>{{item.positionSkewBanner}}</span>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'homeHeader',
    data() {
      return {
        // jobLists:[]
      }
    },
    methods: {
      imgError(item) {
        item.dataPic = '/static/wechat/images/default.png';
        // item.dataPic = require('../../../static/wechat/images/default.png');
      },
      gotoJobDetails(id) {
        //设置当前职位
        // this.$store.dispatch('setCurrentJob',item);
        this.$router.push({
          path: `/jobPage/${id}`,
        })
      }

    },
    mounted() {
    },
    watch: {
      jobLists: (val) => {
        val.forEach((item) => {
          let positionPrice;
          if (item.positionPrice) {
            let priceList = item.positionPrice.split('-');
            if (priceList.length > 1) {
              positionPrice = priceList[1]
            } else {
              positionPrice = priceList[0]
            }
            item.positionPrice = positionPrice;
          }
          if (item.positionTag) {
            item.positionTag = JSON.parse(item.positionTag)
          }

        });
      }
    },
    props: ["jobLists"]
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .skew-banner {
    position: absolute;
    background: #f23a35;
    width: 36px;
    border-top-left-radius: 6px;
    text-align: center;
    font-size: 12px;
    line-height: 24px;
    color: #fff;
    top: 0;
    left: 0;
  }

  .skew-banner:before {
    position: absolute;
    right: -6px;
    top: 0;
    content: "";
    width: 0;
    height: 0;
    border-bottom: 10px solid #b93431;
    border-right: 6px solid transparent;
  }

  .skew-banner:after {
    position: absolute;
    bottom: -12px;
    left: 0;
    content: "";
    width: 0;
    height: 0;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-top: 12px solid #f23a35;
  }
  .price-box{
    width: 100%;
  }
  .searchPage .jobs .job-lists .job-component{
    background: #fff;
    border-bottom: none;
    border-radius: 4px;
    margin: 2% 0;
    width: 100%;
    padding: 14px 10px;
  }
  .searchPage .jobs .job-lists .skew-banner{
    top: 4px;
    left: 4px;
  }
  .resultTitle{
    color: #666;
  }
</style>
